<template>
	<view class="content">
		<!-- 头部 -->
		<view class="logintop" style="background:url(http://localhost:3000/img/sub1.png) no-repeat center;background-size: 100% 100%;">
			<!-- 头像用户名 -->
			<view class="logintop_users">
				<view class="logintop_users_left">
					<view class="logintop_users_lfimg">
						<image mode="widthFix" src="http://localhost:3000/img/gr1.png"></image>
					</view>
					<view class="logintop_users_lftitle">
						<view @click="register" v-if="userinfo.username==undefined" class="logintop_users_lfzc">
							<text  class="logintop_users_lfzc_nm">登录/注册</text>
							<image style="width: 22rpx;" mode="widthFix" src="http://localhost:3000/img/next3.png"></image>
						</view>
						<view v-else class="logintop_users_lfzc" @click="tabuser">
							<text  class="logintop_users_lfus_nm">{{userinfo.username}}</text>
							<image style="width: 22rpx;" mode="widthFix" src="http://localhost:3000/img/next3.png"></image>
						</view>
					</view>
				</view>
				<view class="logintop_users_right">
					<image mode="widthFix" src="http://localhost:3000/img/newld.png"></image>
				</view>
			</view>
			<!-- 积分 收藏 -->
			<view class="logintop_jifenh">
				<view class="logintop_jifenh_list" @click="attention">
					<text class="logintop_jifenh_bor"></text>
					<text class="logintop_jifenh_title">关注商品</text>
				</view>
				<view class="logintop_jifenh_list">
					<text class="logintop_jifenh_bor"></text>
					<text class="logintop_jifenh_title">收藏夹</text>
				</view>
				<view class="logintop_jifenh_list">
					<text class="logintop_jifenh_bor"></text>
					<text class="logintop_jifenh_title">足迹</text>
				</view>
				<view class="logintop_jifenh_list">
					<text class="logintop_jifenh_bor"></text>
					<text class="logintop_jifenh_title">积分</text>
				</view>
			</view>
		</view>
		<!-- 中间部分 -->
		<view class="mones">
			<!-- 我的订单 -->
			<view class="mones_order">
				<view class="mones_order_title">
					<text class="mones_order_title_lf">我的订单</text>
					<view class="mones_order_title_ri" @click="allorder(0)">
						<text class="mones_order_ri_name">全部订单</text>
						<image style="width: 18rpx;margin-left: 4rpx;" mode="widthFix" src="http://localhost:3000/img/next2.png"></image>
					</view>
				</view>
				<view class="mones_order_go">
					<view class="mones_order_go_list" @click="allorder(1)">
						<view class="mones_order_go_list_img">
							<image mode="widthFix" src="http://localhost:3000/img/hong1.png"></image>
						</view>
						<text class="mones_order_go_list_title">待付款</text>
					</view>
					<view class="mones_order_go_list" @click="allorder(2)">
						<view class="mones_order_go_list_img">
							<image mode="widthFix" src="http://localhost:3000/img/hong2.png"></image>
						</view>
						<text class="mones_order_go_list_title">待发货</text>
					</view>
					<view class="mones_order_go_list" @click="allorder(3)">
						<view class="mones_order_go_list_img">
							<image mode="widthFix" src="http://localhost:3000/img/hong3.png"></image>
						</view>
						<text class="mones_order_go_list_title">待收货</text>
					</view>
					<view class="mones_order_go_list">
						<view class="mones_order_go_list_img" @click="allorder(4)">
							<image mode="widthFix" src="http://localhost:3000/img/hong4.png"></image>
						</view>
						<text class="mones_order_go_list_title">待评价</text>
					</view>
					<view class="mones_order_go_list">
						<view class="mones_order_go_list_img">
							<image mode="widthFix" src="http://localhost:3000/img/hong5.png"></image>
						</view>
						<text class="mones_order_go_list_title">退款</text>
					</view>
				</view>
			</view>
			<!-- 我的服务 -->
			<view class="mones_order" style="margin-top: 20rpx;">
				<view class="mones_order_title">
					<text class="mones_order_title_lf">我的服务</text>
				</view>
				<view class="mones_order_go">
					<view class="mones_order_go_list" @click="information">
						<view class="mones_order_go_list_img">
							<image mode="widthFix" src="http://localhost:3000/img/hui1.png"></image>
						</view>
						<text class="mones_order_go_list_title">个人资料</text>
					</view>
					<view class="mones_order_go_list" @click="selectreceiver">
						<view class="mones_order_go_list_img">
							<image mode="widthFix" src="http://localhost:3000/img/hui2.png"></image>
						</view>
						<text class="mones_order_go_list_title">我的地址</text>
					</view>
					<view class="mones_order_go_list">
						<view class="mones_order_go_list_img">
							<image mode="widthFix" src="http://localhost:3000/img/hui3.png"></image>
						</view>
						<text class="mones_order_go_list_title">联系客服</text>
					</view>
					<view class="mones_order_go_list" @click="faq">
						<view class="mones_order_go_list_img">
							<image mode="widthFix" src="http://localhost:3000/img/hui4.png"></image>
						</view>
						<text class="mones_order_go_list_title">常见问题</text>
					</view>
				</view>
			</view>
			<!-- 更多推荐 -->
			<index-list>
				<!-- 标题 -->
				<view class="tuijian">
					<text class="tuijian_1"></text>
					<text class="tuijian_2"></text>
					<text class="tjtitle">更多推荐</text>
					<text class="tuijian_2"></text>
					<text class="tuijian_1"></text>
				</view>			
				<!-- 商品列表 -->
			</index-list>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 是否登录
				user:true,
				userinfo:{}
			}
		},
		onShow() {
			this.getusers()
		},
		methods:{
			// 点击用户名,切换用户或退出登录
			tabuser(){
				uni.showActionSheet({
					itemList:["切换账号","退出登录"],
					success: (res) => {
						if(res.tapIndex==0){
							// 切换账号
							console.log("切换账号")
						}else{
							// 退出登录,清除本地缓存，并调整到首页
							uni.removeStorage({
								key:"user",
								success:()=> {
									this.userinfo={}
									uni.switchTab({
										url:"../index/index"
									})
								}
							})
							console.log("退出登录")
						}
					}
				})
			},
			// 获取用户信息
			getusers(){
				uni.getStorage({
					key:"user",
					success: (user) => {
						this.userinfo=JSON.parse(user.data)
						console.log(this.userinfo.username)
					},
					fail:()=> {
						// this.userinfo.username.username=undefined
						// console.log('失败')
						console.log(this.userinfo.username)
					}
				})
			},
			// 点击收货地址,进入我的地址界面
			selectreceiver(){
				uni.navigateTo({
					url:"./selectreceiver?user_id="+this.userinfo.user_id
				})
			},
			// 点击全部订单按钮,将进入订单界面
			allorder(index){
				uni.navigateTo({
					url:"./order?index="+index
				})
			},
			// 点击登录/注册按钮,进入登录注册界面
			register(){
				// 去注册
				// uni.navigateTo({
				// 	url:"./register"
				// })
				
				// 去登陆
				uni.redirectTo({
					url:"./login"
				})
				
			},
			// 点击个人资料,进入个人信息页面
			information(){
				uni.navigateTo({
					url:"./information"
				})
			},
			// 点击常见问题按钮,进入常见问题页面
			faq(){
				uni.navigateTo({
					url:"./faq"
				})
			},
			// 点击关注商品按钮,进入关注界面
			attention(){
				uni.navigateTo({
					url:"./attention"
				})
			}
		}
	}
</script>

<style>
	page{
		height: 100%;
		width: 750rpx;
		background-color: #F3F3F3;
	}
	image{
		display: block;
		width: 100%;
	}
	.content{
		position: relative;
	}
	.logintop{
		width: 100%;
		height: 350rpx;
	}
	.logintop_users{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 50rpx 28rpx;
	}
	.logintop_users_left{
		display: flex;
		align-items: center;
	}
	.logintop_users_lfimg{
		width: 90rpx;
		margin-right: 10rpx;
	}
	.logintop_users_lftitle{
		font-size: 24rpx;
		color: #FFFFFF;
		font-weight: 400;
	}
	.logintop_users_lfzc{
		display: flex;
		align-items: center;
	}
	.logintop_users_right{
		width: 40rpx;
	}
	
	.logintop_jifenh{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 10rpx 0;
	}
	.logintop_jifenh_list{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.logintop_jifenh_bor{
		width: 24rpx;
		height: 6rpx;
		border-radius: 30rpx;
		background-color: #fff;
		margin: 20rpx;
	}
	.logintop_jifenh_title{
		font-size: 18rpx;
		color: #f79fad;
	}
	
	.mones{
		width: 750rpx;
		position: absolute;
		left: 0;
		top: 290rpx;
		right: 0;
		box-sizing: border-box;
	}
	.mones_order{
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding:0 10rpx;
		box-sizing: border-box;
		margin: 0 20rpx;
	}
	.mones_order_title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #eee;
		padding:24rpx 10rpx ;
	}
	.mones_order_title_lf{
		font-size: 22rpx;
		color:#000000;
		font-weight: 500;
	}
	.mones_order_title_ri{
		display: flex;
		align-items: center;
		font-size: 20rpx;
		color: #b5b5b5;
	}
	.mones_order_go{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 40rpx 0;
	}
	.mones_order_go_list{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.mones_order_go_list_img{
		width: 40rpx;
	}
	.mones_order_go_list_title{
		font-size: 18rpx;
		color: #000000;
	}
	
	.tuijian{
		font-size: 26rpx;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}
	text[class^="tuijian"]{
		border-radius: 50%;
		padding: 6rpx;
	}
	.tjtitle{
		background-color:#f3f3f3 ;
		margin: 0 20rpx;
	}
	.tuijian_1{
		background-color:#c81b21;
	}
	.tuijian_2{
		background-color: #df868c;
	}
	
</style>
